<script setup lang="ts">
import {Plus} from '@element-plus/icons-vue'
import { useUnitStore } from './store';
import RDialog from "@/components/r-dialog.vue";
import TreeSelect from '@/components/tree-select/index.vue'

const { current_row, unit_add } = useUnitStore()

const show = ref(false)
const save = () => {
  unit_add()
}
</script>

<template>
  <el-button :type="'primary'" :icon="Plus" @click="show = true">
    新增
  </el-button>

  <r-dialog v-model="show" width="900">
    <template #header>
      [新增]公司单位
    </template>

    <template #default>
      <div>
        <div class="text-[25px] text-center font-bold">公司单位</div>
        <div class="w-[80%] m-auto *:h-14 *:flex *:items-center text-[13px]">
          <div class="flex flex-row border *:h-full *:border">
            <div class="w-[13%] flex justify-end items-center pr-2">名称</div>
            <div class="w-[87%] p-1 flex justify-center items-center">
              <el-input v-model="current_row.name" />
            </div>
          </div>
          <div class="flex flex-row border *:h-full *:border">
            <div class="w-[13%] flex justify-end items-center pr-2">对应英文名</div>
            <div class="w-[87%] p-1 flex justify-center items-center">
              <el-input v-model="current_row.nameen" />
            </div>
          </div>
          <div class="flex flex-row border *:h-full *:border">
            <div class="w-[13%] flex justify-end items-center pr-2">所属单位</div>
            <div class="w-[87%] p-1 flex justify-center items-center">
              <el-input v-model="current_row.pid" />
            </div>
          </div>
          <div class="flex flex-row border *:h-full *:border">
            <div class="w-[13%] flex justify-end items-center pr-2">对应负责人</div>
            <div class="w-[87%] p-1 flex justify-center items-center">
              <tree-select/>
            </div>
          </div>
          <div class="flex justify-between border *:h-full">
            <div class="w-[50%] flex flex-row *:h-full *:border">
              <div class="w-[26.5%] flex justify-end items-center pr-2">所在城市</div>
              <div class="basis-3/4 p-1 flex justify-center items-center">
                <el-input v-model="current_row.city" />
              </div>
            </div>
            <div class="w-[50%] flex flex-row *:h-full *:border">
              <div class="w-[26.5%] flex justify-end items-center pr-2">地址</div>
              <div class="basis-3/4 p-1 flex justify-center items-center">
                <el-input v-model="current_row.address" />
              </div>
            </div>
          </div>
          <div class="flex justify-between border *:h-full">
            <div class="w-[50%] flex flex-row *:h-full *:border">
              <div class="w-[26.5%] flex justify-end items-center pr-2">电话</div>
              <div class="basis-3/4 p-1 flex justify-center items-center">
                <el-input v-model="current_row.tel" />
              </div>
            </div>
            <div class="w-[50%] flex flex-row *:h-full *:border">
              <div class="w-[26.5%] flex justify-end items-center pr-2">传真</div>
              <div class="basis-3/4 p-1 flex justify-center items-center">
                <el-input v-model="current_row.fax" />
              </div>
            </div>
          </div>
          <div class="flex justify-between border *:h-full">
            <div class="w-[50%] flex flex-row *:h-full *:border">
              <div class="w-[26.5%] flex justify-end items-center pr-2">排序号</div>
              <div class="basis-3/4 p-1 flex justify-center items-center">
                <el-input v-model="current_row.sort" />
              </div>
            </div>
            <div class="w-[50%] flex flex-row *:h-full border">
              <div class="w-[26.5%] flex justify-end items-center pr-2"></div>
              <div class="basis-3/4 p-1 flex justify-center items-center">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h-56"></div>
    </template>

    <template #footer>
      <el-button size="small" type="primary" @click="save">保存(S)</el-button>
    </template>
  </r-dialog>
</template>